<script setup>

import {nextTick, onMounted, reactive, ref} from "vue";
import {findProcessSetting} from "@/apis/zyj/ProcessSettings.js";
import {ElMessage} from "element-plus";
import {addDetailsProcess} from "@/apis/zyj/Process.js";

const props = defineProps({
  addProcessDialog: Boolean,
  code: String,
  orderNumbers: Array,
  processDatas: Array
})

const processData = ref([])
const ruleFormRef = ref(null)

onMounted(() => {
  findProcessSetting('', '-1', '-1').then(res => {
    processData.length = 0
    processData.value.push(...res)
  })
})


const form = reactive({
  procedureCode: '',
  orderNumber: 1,
  processCode: null,
  processName: null,
  nextProcessType: '',
  color: '#000000',
  isKey: null,
  isQualitytest: null,
  setupTime: 1,
  latencyTime: 1,
  remark: null
})
const resetForm = reactive({...form})
const emit = defineEmits(['close-dialog'])
// 关闭
const handleClose = () => {
  Object.assign(form, resetForm)
  emit('close-dialog')
}
// 确定
const handleConfirm = async () => {
  if (!ruleFormRef.value) return
  ruleFormRef.value.validate(valid => {
    if (valid) {
      form.procedureCode = props.code
      if (props.orderNumbers !== null) {
        for (let i = 0; i < props.orderNumbers.length; i++) {
          if (props.orderNumbers[i] === form.orderNumber) {
            ElMessage.error('序号重复')
            return
          }
        }
      }
      if (props.processDatas !== null) {
        for (let s of props.processDatas) {
          if (s.processCode === form.processCode) {
            ElMessage.error('工序已存在')
            return
          }
        }
        for (let s of props.processDatas) {
          if (s.isKey === '0' && s.isKey == form.isKey) {
            ElMessage.error('每个工艺流程只能有一个关键工序')
            return
          }
        }
      }
      addDetailsProcess(form).then(req => {
        if (req === '成功') {
          ElMessage.success('添加成功')
          handleClose()
        } else {
          ElMessage.error('添加失败')
        }
      })
    } else ElMessage.error('请填写完整信息');
  })
}

const selectedOption = ref(null);
// 获取工序名称
const handleMuchData = (value) => {
  selectedOption.value = processData.value.find(option => option.processCode === value);
  form.processName = selectedOption.value.processName
  console.log(form)
}
// 表单校验
const rules = {
  processCode: [
    {required: true, message: '请选择工序', trigger: 'blur'}
  ],
  isQualitytest: [
    {required: true, message: '请选择是否需要质检确认', trigger: 'blur'}
  ],
  isKey: [
    {required: true, message: '请选择是否关键工序', trigger: 'blur'}
  ],
  nextProcessType: [
    {required: true, message: '请选择工序关系', trigger: 'blur'}
  ],
}

// 打开弹窗时清空校验
const handleOpenCardDialog = () => {
  nextTick(() => {
    // 清空校验
    ruleFormRef.value.clearValidate()
  })
}
</script>

<template>
  <el-dialog title="添加工艺组成" v-model="props.addProcessDialog" width="60%" :before-close="handleClose"
             class="operation-steps-dialog" align-center append-to-body>
    <el-form :model="form" ref="ruleFormRef" :rules="rules" label-width="150px">
      <el-input type="hidden" v-model="props.code"/>
      <el-row>
        <el-col :span="12">
          <el-form-item label="序号">
            <el-input-number
                v-model="form.orderNumber"
                :min="1"
                class="w-32"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="工序" prop="processCode">
            <el-select v-model="form.processCode" @change="handleMuchData" placeholder="请选择工序">
              <el-option v-for="item of processData" :label="item.processName" :value="item.processCode"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="与下一道工序的关系" prop="nextProcessType">
            <el-tooltip
                class="box-item"
                effect="dark"
                placement="right"
                show-after="0"
                auto-close="0"
            >
              <template #content>
                <div>S-to-S：当前工序开始生产，下一道工序才可开始生产<br>
                  F-to-F：当前工序结束生产，下一道工序才可结束生产<br>
                  S-to-F：当前工序开始生产，下一道工序才可结束生产<br>
                  F-to-S：当前工序结束生产，下一道工序才可开始生产
                </div>
              </template>
              <el-select placeholder="请选择工序关系" v-model="form.nextProcessType" style="width: 200px">
                <el-option label="S-to-S" value="SS"/>
                <el-option label="F-to-F" value="FF"/>
                <el-option label="S-to-F" value="SF"/>
                <el-option label="F-to-S" value="FS"/>
              </el-select>
            </el-tooltip>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="甘特图显示颜色">
            <el-color-picker v-model="form.color"/>
            <el-input v-model="form.color" readonly style="width: 200px"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="是否关键工序" prop="isKey">
            <el-tooltip class="box-item" effect="dark" placement="right">
              <template #content>
                <div>是：整个工单的生产进度将根据当前工序的生产报工数量进行更新<br>
                  每个工艺流程只能有一个关键工序
                </div>
              </template>
              <el-select v-model="form.isKey" placeholder="请选择是否关键工序" style="width: 200px">
                <el-option label="是" value="0"/>
                <el-option label="否" value="1"/>
              </el-select>
            </el-tooltip>

          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否需要质检确认" prop="isQualitytest">
            <el-radio-group v-model="form.isQualitytest">
              <el-radio label="是" value="0"></el-radio>
              <el-radio label="否" value="1"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="准备时间">
            <el-tooltip class="box-item" effect="dark" content="当前系统支持的最小时间粒度为1小时" placement="right">
              <el-input-number v-model="form.setupTime" min="0"/>
            </el-tooltip>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="生产时间">
            <el-input-number v-model="form.latencyTime" min="0"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="备注">
        <el-input v-model="form.remark" type="textarea" :rows="4" placeholder="请输入内容"/>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>

</style>